import G6 from '@antv/g6'

export default {
    init () {
        G6.registerNode('customNode', {
            afterDraw (cfg, group) {
                const [width, height] = cfg.size
                const { iconUnicode, label, name, anchorPoints } = cfg

                // 默认位置居中 - 加上 偏移量，使之从 左上角位置 计算
                const offsetX = -width / 2
                const offsetY = -height / 2

                // icon
                if (iconUnicode) {
                    group.addShape('text', {
                        attrs: {
                            x: offsetX + 10,
                            y: offsetY + 10,
                            textBaseline: 'top',
                            fontFamily: 'iconfont', // 对应 css中 font-family: "iconfont"
                            text: iconUnicode,
                            fontSize: 20,
                            fill: '#1890ff',
                            cursor: 'move'
                        },
                        name: 'label',
                        draggable: true
                    })
                }

                // 标题
                if (label) {
                    group.addShape('text', {
                        attrs: {
                            x: offsetX + 40,
                            y: offsetY + 15,
                            textBaseline: 'top',
                            text: label,
                            fontSize: 16,
                            fontWeight: 600,
                            fill: '#565758',
                            cursor: 'move'
                        },
                        name: 'label',
                        draggable: true
                    })
                }

                // 名称
                if (name) {
                    group.addShape('text', {
                        attrs: {
                            x: 0,
                            y: offsetY + 50,
                            textAlign: 'center',
                            textBaseline: 'top',
                            text: name,
                            fontSize: 15,
                            fill: '#565758',
                            cursor: 'move'
                        },
                        name: 'name',
                        draggable: true
                    })
                }

                // 锚点
                addAnchorPoints({
                    list: anchorPoints,
                    group,
                    width,
                    height,
                    offsetX,
                    offsetY
                })
            }
        }, 'rect')
    }
}

// 添加 锚点
function addAnchorPoints ({ list, group, width, height, offsetX, offsetY }) {
    list.forEach(item => {
        const [x, y] = item
        const isInAnchorPoint = y === 0

        const attrs = {
            x: x * width + offsetX,
            y: y * height + offsetY,
            opacity: 0,
            // 下方锚点 鼠标样式设置为 可连接样式
            cursor: isInAnchorPoint ? 'move' : 'crosshair'
        }

        // 添加 锚点 标识 isInAnchorPoint / isOutAnchorPoint
        attrs[isInAnchorPoint ? 'isInAnchorPoint' : 'isOutAnchorPoint'] = true

        // 大圆圈 - 事件热区
        group.addShape('circle', {
            attrs: {
                ...attrs,
                r: 10,
                fill: '#1890ff'
            },
            name: 'anchorPointArea',
            draggable: true
        })

        // 小圆点
        group.addShape('circle', {
            attrs: {
                ...attrs,
                r: 3,
                fill: '#fff',
                stroke: '#1890ff'
            },
            name: 'anchorPoint',
            draggable: true
        })
    })
}
